Como deixar uma imagem responsiva com bootstrap?
imagem responsiva bootstrap
Basta usar a classe do bootstrap img-responsive ou img-fluid.
A principal diferença entre o img-responsive e o img-fluid é a versão do bootstrap. Até o 3 se usava o img-responsive e depois do 4 o img-fluid.
Uma imagem responsiva serve para se adaptar a largura independente do tamanho da tela ou do navegador. Se adapta desde uma tela de desktop até um smartphone. Veja aqui o que é responsividade.
A classe img-responsive modifica a largura máxima e a altura da imagem adaptando o leiaute para a tela ou elemento pai. Para acompanhar o elemento pai ela usa width: 100% e height: auto.
Por exemplo:
<img src="caminho da imagem" class="img-responsive">
Essa classe é padrão do framework, mas pode ser complementada com outras ou estilos próprios de CSS. Por exemplo para usar a imagem menor que o elemento pai para dividir por texto pode usar o width: 40%, ou para centralizar a imagem use a classe .center-block.
Por padrão a imagem irá ficar limitada ao elemento em que está contida. No caso se tiver usando um grade com col-md-6 a imagem irá ocupar apenas metade do elemento col-md-12.
Entenda melhor isso em como usar as grides do bootstrap.
Veja mais em:
Como tratar imagens com bootstrap?
Como fazer imagens com cantos arredondados no bootstrap?
Como usar miniaturas de imagens (thumbnails) no bootstrap?
Leia mais em: etbootstrap.com/docs/4.0/cont...
